<template>
  <div>
    <APPHeader></APPHeader>
    <div class="main wz">
      <span>你当前的位置:</span>
      <ul>
        <li>名鞋库</li>
        <li>>></li>
        <li>运动鞋子</li>
        <li>>></li>
        <li>休闲鞋</li>
        <li>>></li>
        <li>彪马</li>
        <li>>></li>
        <li>彪马鞋子</li>
        <li>>></li>
        <li>彪马</li>
        <li>37160203</li>
      </ul>
    </div>
    <div class="main container" style="height: 651px; width: 1200px">
      <div id="box">
        <div class="middle">
          <ul>
            <li
              v-for="(item, index) in list1"
              v-show="Idx == index"
              :key="item.id"
            >
              <img :src="item.url" alt="" />
            </li>
          </ul>
        </div>
        <div class="small">
          <ul>
            <li
              @click="changeIdx(index)"
              :class="Idx == index ? 'selected' : ''"
              v-for="(item, index) in list2"
              :key="item.id"
            >
              <img :src="item.url" alt="" />
            </li>
          </ul>
        </div>
        <div class="fx">
          <span>分享到:</span>
          <img @click="Toast" src="/images/log.png" alt="" />
        </div>
      </div>
      <div class="zs">
        <div class="bx">
          <p>{{ list.gname }}</p>
          <span style="color: red">彪马</span><span>更多</span>
        </div>
        <div class="bx1">
          <div>
            <span>吊 牌 价:</span>
            <span style="text-decoration: line-through">￥599.00</span>
          </div>
          <div>
            <span>销 售 价:</span>
            <span style="color: red; font-size: 20px">￥{{ list.gprice }}</span>
            <span>(4.1折) 立省:</span>
            <span> ￥351.00</span>
          </div>
          <div>
            <span>好 评 度:</span>
            <van-rate v-model="value" />(已有53人评论)
          </div>
          <div>
            <span>运&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;费:</span>
            <span>名鞋库会员满99包邮 (不包含货到付款)</span>
          </div>
        </div>
        <div class="bx2">
          <div class="cx">
            <span
              style="
                background-color: red;
                color: white;
                display: inline-block;
                width: 80px;
                text-align: center;
                height: 20px;
                line-height: 20px;
              "
              >促销信息</span
            ><span
              style="
                color: #fe6464;
                background-color: pink;
                width: 520px;
                display: inline-block;
                text-indent: 10px;
                height: 20px;
                line-height: 20px;
              "
              >99包邮</span
            >
          </div>
        </div>
        <div class="bx3">
          <div style="width: 600px; height: 40px">
            <span style="float: left; margin-top: 5px"
              >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;尺码:&nbsp;&nbsp;</span
            >
            <ul class="cm">
              <li
                v-for="(item, index) in size"
                :key="index"
                @click="change1(index)"
                :class="index1 == index ? 'current' : ''"
              >
                {{ item }}
              </li>
            </ul>
          </div>
          <div style="width: 600px; height: 40px">
            <span style="float: left; margin-top: 5px"
              >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;颜色:&nbsp;&nbsp;</span
            >
            <img
              :src="list.gurl"
              alt=""
              style="
                margin-left: 5px;
                width: 30px;
                height: 30px;
                border: 1px solid orange;
              "
            />
          </div>
          <div>
            <span>购买数量:&nbsp;&nbsp;</span>
            <van-stepper
              v-model="gnumber"
              min="1"
              input-width="40px"
              button-size="20px"
              style="display: inline-block"
            />
            <button
              @click="Toast"
              style="position: absolute; right: 2px; bottom: 10px"
            >
              <van-icon name="plus" />收藏此商品
            </button>
          </div>
          <div @click="Toast" class="cmhs">尺码换算</div>
        </div>
        <div class="bx4" style="height: 60px; width: 600px">
          <span
            >你将购买<input
              v-model="gnumber"
              style="border: none; width: 20px; color: red; text-align: center"
            />件
            <input
              v-if="gsize != ''"
              v-model="gsize"
              style="border: none; width: 20px; color: red; text-align: center"
            />码 深牛仔蓝+米白色</span
          >
          <button
            @click.prevent="Add()"
            style="
              background-color: orange;
              color: white;
              border: 2px solid #ccc;
              cursor: pointer;
              width: 150px;
              height: 40px;
            "
            class="add"
          >
            <van-icon name="shopping-cart-o" /> 加入购物车
          </button>
          <button
            @click="Toast"
            style="
              background-color: #c40000;
              color: white;
              border: 2px solid #ccc;
              cursor: pointer;
              width: 120px;
              height: 40px;
            "
          >
            立即购买
          </button>
        </div>
        <div class="bx5">
          <span>名鞋库保障:</span>
          <ul>
            <li>正品认证</li>
            <li>自由退货</li>
            <li>全场满99免邮</li>
          </ul>
        </div>
        <div class="fot">
          <div class="main" style="background-color: #ccc; height: 40px">
            <span style="float: left; margin-top: 10px"
              >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;尺码&nbsp;&nbsp;</span
            >
            <ul class="fcm">
              <li
                v-for="(item, index) in size"
                :key="index"
                @click="change1(index)"
                :class="index1 == index ? 'current' : ''"
              >
                {{ item }}
              </li>
            </ul>
            <span style="margin-left: 300px">数量:&nbsp;&nbsp;</span
            ><van-stepper
              v-model="gnumber"
              min="1"
              input-width="40px"
              button-size="20px"
              style="display: inline-block; line-height: 40px"
            />&nbsp;
            <span>(库存1180)</span>
            <button
              @click="Add()"
              style="
                background-color: orange;
                padding: 5px 0px;
                color: white;
                width: 150px;
                margin-left: 20px;
                margin-top: 5px;
                cursor: pointer;
                border: 2px solid #ccc;
              "
              class="add"
            >
              <van-icon name="shopping-cart-o" />
              加入购物车
            </button>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper main">
      <ul class="tab">
        <li class="active1">商品详情</li>
        <li>顾客评论(11)</li>
        <li>总销量(32)</li>
        <li>购买咨询(5)</li>
        <li>购物保障</li>
        <li>放心退换货</li>
        <li>常见问题</li>
      </ul>
      <div class="products">
        <div class="selected1">
          <a href="JavaScript:void(0)"><img src="/images/img5.png" alt="" /></a>
        </div>
        <div>
          <a href="JavaScript:void(0)"><img src="/images/img6.png" alt="" /></a>
        </div>
        <div>
          <a href="JavaScript:void(0)"><img src="/images/img7.png" alt="" /></a>
        </div>
        <div>
          <a href="JavaScript:void(0)"><img src="/images/img8.png" alt="" /></a>
        </div>
        <div>
          <a href="JavaScript:void(0)"><img src="/images/img9.png" alt="" /></a>
        </div>
        <div>
          <a href="JavaScript:void(0)"
            ><img src="/images/img10.png" alt=""
          /></a>
        </div>
        <div>
          <a href="JavaScript:void(0)"
            ><img src="/images/img11.png" alt=""
          /></a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Search, Add, GetBigimg, GetSmallimg } from '@/api/goods'
import APPHeader from '../components/APPHeader.vue'
import { Toast } from 'vant'
import $ from 'jquery'
export default {
  name: 'index',
  props: ['id'],
  data() {
    return {
      list: {
        gname: '',
        gprice: ''
      },
      list1: [],
      list2: [],
      index1: -1,
      gnumber: 1,
      gsize: '',
      value: 3,
      flag: true,
      Idx: 0,
      size: [35, 36, 37, 38, 39, 40, 41, 42, 43, 44]
    }
  },
  components: {
    APPHeader
  },
  async created() {
    let gid = this.id
    console.log(gid)
    let { data } = await Search(gid, {
      headers: {
        token: localStorage.getItem('token')
      }
    })
    this.list = data.data[0]
  },
  async beforeMount() {
    let gid = this.id
    let { data } = await GetBigimg(gid, {
      headers: {
        token: localStorage.getItem('token')
      }
    })
    this.list1 = data.data
  },
  async mounted() {
    let gid = this.id
    let { data } = await GetSmallimg(gid, {
      headers: {
        token: localStorage.getItem('token')
      }
    })
    this.list2 = data.data
    $.fn.extend({
      _tabchange1() {
        let self = this
        this.find('.tab li').click(function () {
          $(this).addClass('active1').siblings().removeClass('active1')
          let index = $(this).index()
          self
            .find('.products div')
            .eq(index)
            .addClass('selected1')
            .siblings()
            .removeClass('selected1')
        })
      }
    })
    $(function () {
      $('.wrapper')._tabchange1()
    })
    $(function () {
      $(window).on('scroll', function () {
        let sTop = $(this).scrollTop()
        if (sTop > 1000) {
          $('.fot').show()
        } else {
          $('.fot').hide()
        }
      })
    })
  },
  methods: {
    changeIdx(index) {
      this.Idx = index
    },
    Toast() {
      Toast('该功能未开发,请敬请期待!')
    },
    change1(index) {
      if (this.flag) {
        this.index1 = index
        this.gsize = this.size[index]
        console.log(this.gsize)
        this.flag = false
      } else {
        this.index1 = -1
        this.gsize = ''
        console.log(this.gsize)
        this.flag = true
      }
    },
    Add() {
      this.list.uid = JSON.parse(localStorage.getItem('userinfo') || '{}').id
      this.list.gnumber = this.gnumber
      this.list.gsize = this.gsize
      console.log(this.list)
      if (this.gsize != '') {
        Add(this.list, {
          headers: {
            token: localStorage.getItem('token')
          }
        }).then(function (res) {
          console.log(res)
          Toast(res.data.msg)
        })
      } else {
        Toast('请选择购买鞋的尺码!')
      }
    }
  }
}
</script>

<style lang="less" scoped>
html,
body {
  height: 100%;
  width: 100%;
}

body {
  min-width: 1200px;
}

.main {
  margin: 0 auto;
  width: 1200px;
}

.wz {
  height: 40px;
  // width: 100%;
}

.wz span {
  float: left;
  margin: 0 20px 0 30px;
}

.wz ul li {
  float: left;
  padding: 0 5px;
}

#box {
  width: 500px;
  height: 650px;
  border-bottom: 1px solid #ccc;
  float: left;
}

#box .middle {
  width: 498px;
  height: 498px;
  border: 1px solid #ccc;
}

#box .middle li {
  width: 498px;
  height: 498px;
}

#box .middle li img {
  width: 498px;
  height: 498px;
}

#box .small {
  height: 100px;
  width: 500px;
}

#box .small ul {
  width: 500px;
  height: 100px;
}

#box .small li {
  width: 60px;
  height: 60px;
  border: 1px solid #ccc;
  margin: 20px 5px;
  float: left;
}

#box .small ul li img {
  width: 60px;
}
#box .small .selected {
  border: 1px solid #bd0000;
}
#box .fx {
  height: 40px;
  width: 500px;
}
#box .fx span {
  position: absolute;
}
#box .fx img {
  margin-left: 70px;
  width: 150px;
}
.gw:hover {
  background-color: orange;
}
.zs {
  margin-left: 20px;
  float: left;
}
.zs .bx {
  width: 600px;
  height: 40px;
  border-bottom: 1px solid #ccc;
}
.zs .bx p {
  width: 500px;
  float: left;
}
.zs .bx span {
  float: right;
}
.zs .bx1 {
  width: 600px;
  height: 150px;
  border-bottom: 1px solid #ccc;
}
.zs .bx1 div {
  margin-top: 15px;
}
.zs .bx2 {
  width: 600px;
  height: 20px;
  margin: 10px 0;
}
.zs .bx3 {
  width: 560px;
  height: 100px;
  padding: 20px;
  background-color: #e9e9e9;
  position: relative;
}
.zs .bx3 .cm li {
  // padding: 5px;
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  margin: 0 5px;
  border: 1px solid #ccc;
  background-color: white;
  float: left;
  cursor: pointer;
}
.zs .bx3 .cm .current {
  box-sizing: border-box;
  border: 2px solid orange;
}
.zs .bx3 .cmhs {
  position: absolute;
  width: 20px;
  height: 60px;
  text-align: center;
  background-color: aliceblue;
  border: 1px solid #000;
  font-size: 12px;
  top: -2px;
  right: 5px;
  cursor: pointer;
}
.zs .bx4 {
  margin-top: 5px;
  border-bottom: 1px solid #ccc;
  border-top: 1px solid #ccc;
}
.zs .bx4 span {
  float: left;
  margin-top: 30px;
}
.zs .bx4 button {
  padding: 10px;
  margin: 10px 5px;
  float: right;
}
.zs .bx5 {
  width: 600px;
  height: 50px;
}
.zs .bx5 span {
  float: left;
  margin: 20px 0;
}
.zs .bx5 li {
  float: left;
  margin: 20px 40px 0;
}
.wrapper {
  height: auto;
  margin-top: 30px;
}
.tab {
  width: 1200px;
  margin-top: 30px;
  /* border-bottom: 1px solid #ccc; */
  overflow: hidden;
}

.tab li {
  float: left;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border: 1px solid #ccc;
  margin: 0 5px;
  padding: 0 20px;
  cursor: pointer;
  vertical-align: bottom;
}

.products {
  width: 1200px;
  height: auto;
}

.products div {
  display: none;
}

.products .selected1 img {
  vertical-align: top;
  width: 100%;
}

.products .selected1 {
  display: block;
}

.tab li.active1 {
  height: 26px;
  border-top: 4px solid #ccc;
  border-bottom: 0;
}
.fot {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 40px;
  background-color: #e9e9e9;
  display: none;
  box-sizing: border-box;
}
.fcm li {
  width: 25px;
  height: 25px;
  text-align: center;
  line-height: 25px;
  border: 1px solid #ccc;
  background-color: white;
  margin: 5px;
  float: left;
  cursor: pointer;
}
.fcm .current {
  box-sizing: border-box;
  border: 2px solid orange;
}
</style>
